<template>
	<view class="article-item" @tap.stop.prevent="onTargetDetail(info.article_id)">
		<view class="article-cover">
			<easy-loadimage class="article-img" mode="aspectFill" :scroll-top="scrollTop" :image-src="info.image?info.image.file_path:''" border-radius="36rpx 36rpx 0 0"></easy-loadimage>
		</view>
		<view class="article-info">
			<view class="article-title">{{info.article_title}}</view>
			<view class="article-desc twolist-hidden">{{info.article_abstract?info.article_abstract:info.article_title}}</view>
		</view>
	</view>
</template>

<script>
	export default {
		/**
		 * 组件的属性列表
		 */
		props: {
			info: Object,
			scrollTop:{
				type:Number,
				default:0
			}
		},
		data() {
			return {
				
			}
		},
		methods: {
			onTargetDetail(id){
				uni.navigateTo({
					 url: '/pages/article/detail/index?article_id=' + id
				})
			}
			
		}
	}
</script>

<style lang="scss" scoped>
.article-item{
	position: relative;
	margin-bottom:30rpx;
	background: #F2F2F2;
	border-radius: 36rpx;
}
.article-cover{
	position: absolute;
	left:0rpx;
	top:-2rpx;
	right:0rpx;
	height: 310rpx;
	border-radius: 36rpx;
	overflow: hidden;
	z-index: 1;
}
.article-img{
	width: 100%;
	height: 310rpx;
}
.article-info{
	position: relative;
	padding: 334rpx 20rpx 30rpx;
	z-index: 0;
}
.article-title{
	margin-bottom: 8rpx;
	font-size: 30rpx;
	font-weight: bold;
	color: #000;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	line-height: 1.5;
}
.article-desc{
	font-size: 23rpx;
	font-weight: 400;
	line-height: 1.6;
	color: $uni-text-color-grey;
}
</style>
